//全局变量
@main-background:#1ABC9C;
@img-base:"../img";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    vertical-align: baseline;
}

html, body, #view {
    width:100%;
    height:100%;
}

body {
	min-width:1003px;
    font-size: 16px;
}

ol, ul, li {
    list-style: none;
}

//main模块嵌套
#main {
    width:100%;
    height:100%;
    background:@main-background;
    .center {
       position:absolute;
       width:350px;
       height:250px;
       border:0px solid #000;
       top:40%;
       left:0;
       right:0;
       bottom:60%;
       margin:auto;
       .logo { 
          background: #fff url("@{img-base}/logo.png") no-repeat center center;
          background-size:150px 150px;
          width:180px;
          height:180px;
          border-radius: 100px;
          margin:auto;
       };
       .action {
          margin-top:10px;
          text-align:center;
          span {
                display: inline-block;
                width: 140px;
                height: 40px;
                border: 0px solid #ccc;
                text-align: center;
                margin:10px;
          }

          .joinus {
                border-radius: 50px 0 50px 0;
          }

          .signin {
                border-radius: 0 50px 0 50px;
          }
          
          .btn-success {
                background-color:#83C326; 
          }
 
          .btn-success:hover {
                background-color:#ABE851; 
          }

       }       
    }
}


//signin模块
#signin {
    width:100%;
    height:100%;
    background:@main-background;
    .center {
       position:absolute;
       width:350px;
       height:250px;
       border:0px solid #000;
       top:0;
       left:0;
       right:0;
       bottom:0;
       margin:auto;
       .control-group {
          margin-bottom: 18px;
       }
       .m-login {
          height:45px;
          font-size:18px;
       }
       .login-field {
          padding-bottom: 11px;
          padding-top: 11px;
          padding-left: 10px;
          width: 299px;
          border-radius:8px;
          height:45px;
          border:2px solid #EDEFF1;
       }
       
       .login-field:focus {
          border: 2px solid #1ABC9C;
       }
       
       .login-field:focus + .login-field-icon{
          color: #1abc9c;
       }

       .help-block {color:#ff0000}
       .login-field-icon {
          color: #bfc9ca;
          font-size: 16px;
          position: absolute;
          right: 15px;
          top: 3px;
       }
       .fui-lock:before {
          content: "\e633";
       }
       .fui-user:before {
          content: "\e631";
       }
       .login-field-icon:before {
          font-family: 'Flat-UI-Icons';
          speak: none;
          font-style: normal;
          font-weight: normal;
          line-height: 1;
          -webkit-font-smoothing: antialiased;

       }
       .control-group {
           .ng-valid { }
           .ng-invalid:focus { 
               color:#ff0000;
               border: 2px solid #ff0000;
           }
           .ng-invalid:focus + .login-field-icon{
               color: #ff0000;
           }
           .ng-pristine:focus {
               color:#000;
               border:2px solid #CCD0D4;
           }
           .ng-pristine:focus + .login-field-icon{
               color: #bfc9ca;
           }
           .ng-dirty{  }
       }

    }

}

//joinus模块
#joinus {
    width:100%;
    height:100%;
    background:@main-background;
    .center {
       position:absolute;
       width:350px;
       height:250px;
       border:0px solid #000;
       top:0;
       left:0;
       right:0;
       bottom:0;
       margin:auto;
       .control-group {
          margin-bottom: 18px;
       }
       .m-login {
          height:45px;
          font-size:18px;
       }
       .login-field {
          padding-bottom: 11px;
          padding-top: 11px;
          padding-left: 10px;
          width: 299px;
          border-radius:8px;
          height:45px;
          border:2px solid #EDEFF1;
       }
       
       .login-field:focus {
          border: 2px solid #1ABC9C;
       }
       
       .login-field:focus + .login-field-icon{
          color: #1abc9c;
       }

       .help-block {color:#ff0000}
       .login-field-icon {
          color: #bfc9ca;
          font-size: 16px;
          position: absolute;
          right: 15px;
          top: 3px;
       }
       .fui-lock:before {
          content: "\e633";
       }
       .fui-user:before {
          content: "\e631";
       }
       .login-field-icon:before {
          font-family: 'Flat-UI-Icons';
          speak: none;
          font-style: normal;
          font-weight: normal;
          line-height: 1;
          -webkit-font-smoothing: antialiased;

       }
       .control-group {
           .ng-valid { }
           .ng-invalid:focus { 
               color:#ff0000;
               border: 2px solid #ff0000;
           }
           .ng-invalid:focus + .login-field-icon{
               color: #ff0000;
           }
           .ng-pristine:focus {
               color:#000;
               border:2px solid #EDEFF1;
           }
           .ng-pristine:focus + .login-field-icon{
               color: #bfc9ca;
           }
           .ng-dirty{  }
       }

    }

}

